import { memo, useEffect, useMemo, useRef, useState } from 'react'
import * as echarts from 'echarts'
import classNames from 'classnames'
import { isObject } from '@multi-kit/inspect'
import { SwitchButton } from '@/components'
import { Flex, Radio, Input, Button, Form, InputNumber, Slider } from 'antd';
import { setSpeed } from '@/api/common.api';
import { scaleObjectValues } from '@/utils/utility';

export interface Props {
  state: unknown
}


let timer

function SpeedConfig<Props>(props: Props) {
  const { state } = props


  const [speedA, setSpeedA] = useState(0)

  const changeAAction = (value) => {
    setSpeedA(value)
  }


  const [speedB, setSpeedB] = useState(0)
  const changeBAction = (value) => {
    setSpeedB(value)
  }


  const [power, setPower] = useState(0)


  const togglePowerAction = (state) => {
    setPower(state)


    // if (state === 0) {
    //   clearInterval(timer)
    // } else {

    //   if (speedA > 0 || speedB > 0) {
    //     timer = setInterval(() => {
    //       setSpeed({ speedA, speedB })
    //     }, 100)
    //   }

    // }
  }


  useEffect(() => {
    if (power === 0) return;

    const timer = setInterval(() => {
      setSpeed({ speedA, speedB });
    }, 100);

    return () => clearInterval(timer);
  }, [power, speedA, speedB]);


  useEffect(() => {
    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div className="grid grid-cols-6  ">
      <div className="col-span-1 border border-slate-700  p-2 flex items-center justify-center">电机A</div>
      <div className="col-span-4 border border-slate-700  p-2 text-center">
        <Form
          layout="inline"
          className=' flex items-center justify-center gap-2'
        >
          <Form.Item name="speedA" className='flex-1 m-0 '>
            <div className=' flex items-center gap-4'>
              <div className='w-6'>{speedA}</div>
              <div className='flex-1'><Slider defaultValue={speedA} value={speedA} min={-120} max={120} onChange={changeAAction} /></div>
            </div>
          </Form.Item>

        </Form>
      </div>
      <div className="col-span-1 border border-slate-700   rounded-br-md row-span-2  flex items-center justify-center">
        <SwitchButton size="small" value={power} checkedChildren={{ label: "使能", value: 1 }} unCheckedChildren={{ label: "停止", value: 0 }} onChange={togglePowerAction} ></SwitchButton>
      </div>
      <div className="col-span-1 border border-slate-700   rounded-bl-md p-2 flex items-center justify-center">电机B</div>
      <div className="col-span-4 border border-slate-700  p-2 text-center ">
        <Form
          layout="inline"
          className=' flex items-center justify-center gap-2'
        >
          <Form.Item name="speedB" className='flex-1 m-0'>
            <div className=' flex items-center gap-4'>
              <div className='w-6'>{speedB}</div>
              <div className='flex-1'><Slider defaultValue={speedB} value={speedB} min={-120} max={120} onChange={changeBAction} /></div>
            </div>
          </Form.Item>

        </Form>
      </div>

    </div>
  )
}

export default memo(SpeedConfig)
